/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';

import YaoView from './YaoView'
//       : 乾兑离 震巽坎艮坤
//    top: 1   3   5  7
// center: 1 2     5 6
// bottom: 1 2 3 4
export default class GuaView extends Component {

  constructor(props){
  	super(props);
  	this.state = {
      topYangItems:[1,3,5,7],
      centerYangItems:[1,2,5,6],
      bottomYangItems:[1,2,3,4]
    };
  }

  render() {
    var props = this.props;
    var value = this.props.tagValue;

    return (
      <View style={[props.style,styles.container]}>
        <YaoView style={styles.topYaoStyle} isYang={this._topIsYang(value)}></YaoView>
        <YaoView style={styles.centerYaoStyle} isYang={this._centerIsYang(value)}></YaoView>
        <YaoView style={styles.bottomYaoStyle} isYang={this._bottomIsYang(value)}></YaoView>
      </View>
    );
  }

  _topIsYang = (value) => {
    var result = false;
    for (var i = 0; i < this.state.topYangItems.length; i++) {
      if (this.state.topYangItems[i]-1 == (value-1)%8) {
        result = true;
        break;
      }
    }
    return result;
  }

  _centerIsYang = (value) => {
    var result = false;
    for (var i = 0; i < this.state.centerYangItems.length; i++) {
      if (this.state.centerYangItems[i]-1 == (value-1)%8) {
        result = true;
        break;
      }
    }
    return result;
  }

  _bottomIsYang = (value) => {
    var result = false;
    for (var i = 0; i < this.state.bottomYangItems.length; i++) {
      if (this.state.bottomYangItems[i]-1 == (value-1)%8) {
        result = true;
        break;
      }
    }
    return result;
  }


}


const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between',
  },
  topYaoStyle:{
    flex: 0.25,
  },
  centerYaoStyle:{
    flex: 0.25,
  },
  bottomYaoStyle:{
    flex: 0.25,
  }
});
